<template>
  <!-- 评价 -->
  <el-dialog
    v-model="props.visible"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('userCenter.t16') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div
      class="main flexcc mb-1"
      v-for="(item, index) in evaluationDetailBoList"
      :key="index"
    >
      <div class="l flexec mr-2">{{ listData[index].dictLabel }}</div>
      <div class="s flexsc">
        <template v-for="n in 5">
          <img
            v-show="n <= item.evaluationStars"
            class="mr-1"
            src="@/assets/img/icon_shoucang_pre.png"
            @click="handleEvaluate(index, n)"
          />
          <img
            v-show="!(n <= item.evaluationStars)"
            class="mr-1"
            src="@/assets/img/icon_shoucang_nor.png"
            @click="handleEvaluate(index, n)"
          />
        </template>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm"
        >
          {{ t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onBeforeMount, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { serviceEvaluationAdd } from '@/service/common.js'
import useDict from '@/hooks/useDict'
const { dictData, getDictData } = useDict()

const { t, locale } = useI18n()

onBeforeMount(() => {
  init()
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 	报价单id
  quotaionOrderId: {
    type: [String, Number],
    default: ''
  },
  // 	订单id
  orderId: {
    type: [String, Number],
    default: ''
  },
  // 	被评企业id
  ratedEnterpriseId: {
    type: [String, Number],
    default: ''
  },
  // 1 2 3
  type: {
    type: [String, Number],
    default: 1
  }
})

const emit = defineEmits(['close', 'getList'])

const handleClose = () => {
  emit('close')
}

// 取消
const cancel = () => {
  handleClose()
}

// 确定
const confirm = () => {
  const obj = {
    1: 'shcw_quotation_dock_order',
    2: 'shcw_quotation_procure_order',
    3: 'shcw_quotation_assist_order'
  }
  const params = {
    evaluationApi: obj[props.type],
    evaluationDetailBoList: evaluationDetailBoList.value,
    quotaionOrderId: props.quotaionOrderId,
    orderId: props.orderId,
    ratedEnterpriseId: props.ratedEnterpriseId
  }

  // console.log(params, '---')

  serviceEvaluationAdd(params).then(({ msg }) => {
    ElMessage.success(msg)
    handleClose()
    emit('getList')
  })
}

//
const listData = ref([])
const getList = async () => {
  const obj = {
    1: 'dock_evaluate',
    2: 'procure_evaluate',
    3: 'assist_evaluate'
  }

  const key = obj[props.type]

  await getDictData(key)

  listData.value = dictData.value[key]
  evaluationDetailBoList.value = listData.value.map((item) => {
    return {
      evaluationContent: item.dictValue,
      evaluationStars: 4 // 默认四星
    }
  })
}

// 评价明细
const evaluationDetailBoList = ref([])

// 点击星星
const handleEvaluate = (index, n) => {
  evaluationDetailBoList.value[index].evaluationContent = listData.value[index].dictValue
  evaluationDetailBoList.value[index].evaluationStars = n
}

//
const init = async () => {
  getList()
}
</script>

<style scoped lang="scss">
.main {
  .l {
    width: 200px;
  }
  .s {
    width: 300px;
  }
  img {
    cursor: pointer;
  }
}
</style>
